import React, { Component, Fragment } from 'react';
import { Card, Carousel } from 'antd';
import './ui.less';

export default class Carousels extends Component {
  onChange = () => {
    console.log(1);
  };

  render() {
    return (
      <Fragment>
        <Card title="文字背景轮播" className="card-wrap">
          <Carousel afterChange={this.onChange} autoplay>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
          </Carousel>
        </Card>
        {/* 注意设置样式 */}
        <Card title="图片轮播" className="card-wrap">
          <Carousel afterChange={this.onChange} autoplay>
            <div>
              <img src={'/assets/404.svg'} alt="404" />
            </div>
            <div>
              <img src={'/gallery/6.png'} alt="6" />
            </div>
            <div>
              <img src={'/gallery/12.png'} alt="12" />
            </div>
            <div>
              <img src={'/gallery/14.png'} alt="14" />
            </div>
          </Carousel>
        </Card>
      </Fragment>
    );
  }
}
